<template>
    <div class="bg">
        <el-form :rules="rules"

                 ref="loginForm"
                 :model="loginForm"

                 class="loginContainer" >
            <h3 class="loginTitle">系统登录</h3>
            <el-form-item prop="username">
                <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="no">
                <el-input type="text" auto-complete="false" v-model="loginForm.no" placeholder="请输入身份证号"></el-input>
            </el-form-item>
            <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                loginForm:{
                    username:"审核员1号",
                    no:'111',
                },
                loading:false,
                rules:{
                    username: [
                        {required:true,message:'请输入用户名',trigger:'blur'},
                        // { min:1,max:16,message:'长度在 1 到 16 个字符',trigger:'blur'}
                    ],
                    no: [{required:true,message: '请输入身份证号',trigger: 'blur'}],
                }
            }
        },
        created() {
            console.log(this.$store.state.baseApi)
        },
        methods:{
            submitLogin(){
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        const _this = this;
                        this.postRequest('/login',this.loginForm).then(resp=>{
                            if(resp){
                                const  jwt = resp.headers['authorization'];
                                const userInfo = resp.data.data;
                                _this.$store.commit("SET_TOKEN",jwt);
                                console.log(userInfo)
                                _this.$store.commit("SET_USERINFO",userInfo);
                                //跳转首页
                                if (userInfo.role === 'corp') {
                                    this.$router.push({
                                        name:'UserInterface'
                                    })
                                 } else if (userInfo.role === '审核员') {
                                     this.$router.push({
                                         name: 'AuditorInterface'
                                     })
                                 } else if (userInfo.role === '监督员') {
                                     this.$router.push({
                                        name: 'HealthSupInterface'
                                     })
                                 }
                            }
                        })

                    } else {
                        this.$message.error('请输入所有信息！');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style>
    .loginTitle{
        margin: 0 auto 40px auto;
        text-align: center;
    }
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: rgba(255,255,255,0.4);
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .loginLabel{
        text-align: center;
    }
    .bg{
        background: url("../images/back.jpg") no-repeat;
        background-size: 100% 100%;
        height: 100%;
        width: 100%;
        position: fixed;
    }

</style>